<template>
  <el-row justify="space-between">
    <el-col :span="6" style="height: 400px">
      <hz-echarts-bar-base ref="bar1" id="bar1"/>
    </el-col>
    <el-col :span="6" style="height: 400px">
      <hz-echarts-line-base ref="line1" id="line1"/>
    </el-col>
    <el-col :span="6" style="height: 400px">
      <hz-echarts-pie-base ref="pie1" id="pie1"/>
    </el-col>
    <el-col :span="6" style="height: 400px">
      <hz-echarts-word-cloud ref="wordCloud1" id="wordCloud1"/>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import HzEchartsBarBase from "/@components/echarts/bar/Hz-Echarts-Bar-Base.vue";
import HzEchartsLineBase from "/@components/echarts/line/Hz-Echarts-Line-Base.vue";
import HzEchartsPieBase from "/@components/echarts/pie/Hz-Echarts-Pie-Base.vue";
import HzEchartsWordCloud from "/@components/echarts/wordcloud/Hz-Echarts-WordCloud.vue";

const testData = ref({
  title: '柱状图',
  xData: ['周一11', '周二', '周三', '周四', '周五', '周六', '周日'],
  yData: [120, 200, 150, 80, 70, 110, 130]
})

const testData1 = ref({
  title: '拆线图',
  xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  yData: [120, 200, 150, 80, 70, 110, 130]
})

const testData2 = ref({
  title: '饼图',
  subtext: '模拟数据',
  yData: [
    {name: '周一', value: 120},
    {name: '周二', value: 200},
    {name: '周三', value: 150},
    {name: '周四', value: 80},
    {name: '周五', value: 70},
  ]
})

const testData3 = ref({
  title:'词云',
  data:[
    {name: '词云1',value: 1000},
    {name: '词云2',value: 550},
    {name: '词云3',value: 444},
    {name: '词云4',value: 333},
  ]
})

const bar1 = ref()
const line1 =ref()
const pie1 = ref()
const wordCloud1 = ref()

onMounted(() => {
  bar1.value.refreshChart(testData.value)
  line1.value.refreshChart(testData1.value)
  pie1.value.refreshChart(testData2.value)
  wordCloud1.value.refreshChart(testData3.value)
})

</script>

<style scoped lang="scss">

</style>